<template>
  <div class="login">
    <div class="loginbox">
      <img class="logo" src="../assets/img/simtoplogo.png" />
      <div class="content">
        <div class="logintitle">欢迎来到上海形拓科技.</div>
        <div class="notice">通过填写下面的信息登陆您的账户</div>
        <div class="inputbox">
          <div class="inputtittle">账户</div>
          <el-input
            placeholder="请输入用户名"
            class="inputtext"
            v-model="username"
          ></el-input>
          <div class="inputtittle2">密码</div>
          <el-input
            placeholder="请输入密码"
            class="inputtext"
            type="password"
            v-model="password"
          ></el-input>
          <div class="checkb">
            <el-checkbox v-model="checked" class="check" checked
              >记住密码</el-checkbox
            >
          </div>
        </div>
        <button class="loginbtn" @click="login">登录</button>
      </div>
      <div class="bottom">
        <a class="simtophome" href="http://www.simtop.online/" target="_blank"
          >© 2020 simtop, ShangHai</a
        >
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import UserApi from "../api/Userapi.js";

export default {
  name: "login",
  components: {},
  data() {
    return {
      username: "",
      password: "",
      checked: true
    };
  },
  methods: {
    login() {
      var that = this;
      window.console.log(this.username, this.password);
      var params = new URLSearchParams();
      params.append("loginName", this.username);
      params.append("password", this.password);

      this.axios.post(UserApi.login, params).then(res => {
        if (res.data.status == 0) {
          let token = res.data.data;
          // window.console.log(token);
          this.$store.commit("setToken", token);
          sessionStorage.setItem("username", this.username); //需要后端返回 等同token
          if (that.checked === true) {
            window.console.log("checked == true,账号密码默认保存7天");
            //传入账号名，密码，和保存天数3个参数
            that.setCookie(this.username, this.password, 7);
          } else {
            window.console.log("清空Cookie");
            //清空Cookie
            that.clearCookie();
          }

          this.$router.push({ name: "home" });
        } else {
          this.$message({
            type: "error",
            message: res.data.msg
          });
        }
      });
    },
    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    //读取cookie
    getCookie() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "userName") {
            this.username = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "userPwd") {
            this.password = arr2[1];
          }
        }
      }
    },
    //清除cookie
    clearCookie() {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    }
  },
  mounted() {
    this.getCookie();
  }
};
</script>
<style>
@import "../assets/css/font.css";
html,
body {
  position: relative;
  width: 100%;
}
#app {
  position: relative;
  width: 100%;
}
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url(../assets/img/background.png) no-repeat;
  background-size: cover;
  background-color: #000;
}
.logintitle {
  color: #757575;
  font-size: 24px;
  font-family: "PingFang";
  font-weight: 400;
  line-height: 24px;
  /* font-weight: bold; */
}
.notice {
  color: #a1a1a1;
  font-size: 11.2px;
  font-family: "PingFang";
  margin-top: 16px;
  line-height: 16px;
}
.inputtittle {
  color: #a1a1a1;
  font-size: 9.6px;
  font-family: "PingFang";
}
.inputtittle2 {
  color: #a1a1a1;
  font-size: 9.6px;
  font-family: "PingFang";
  margin-top: 24.8px;
}
.logo {
  position: absolute;
  width: 217.6px;
  left: 50%;
  transform: translate(-50%);
  top: -66.4px;
}
.loginbox {
  position: relative;
  width: 419.2px;
  height: 400px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content {
  position: relative;
  width: 355.2px;
  height: 328px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.inputbox {
  margin-top: 51.2px;
  width: 100%;
}

.loginbtn {
  width: 123.2px;
  height: 45.6px;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #4a90e2;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  display: inline-block;
  font-size: 11.2px;
  cursor: pointer;
}

.loginbtn:active {
  color: #fff;
  background: #6faaf1;
  outline: none;
}
.inputtext > .el-input__inner {
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-radius: 0;
  padding: 0;
}
.check .el-checkbox__inner {
  border-radius: 50% !important;
}
.checkb {
  margin-top: 18.4px;
}
.bottom {
  bottom: -60.8px;
  position: absolute;
}
.simtophome {
  text-decoration: none;
  color: #a1a1a1;
  padding-left: 22.4px;
  font-size: 9.6px;
  font-family: "PingFang";
  line-height: 14.4px;
}
</style>
